import React from 'react';
import { getBlogPosts } from '@/lib/getBlogPosts';
import dynamic from 'next/dynamic';
import { Metadata } from 'next';
import MdList from '@/components/MdList'
import ErrorBoundary from '@/components/ErrorBoundary'
import { ConfigProvider } from 'antd';



export const metadata: Metadata = {
  title: 'Support',
  description: 'Read our latest blog posts',
};

export default async function AppPage() {
  try {
    const mdFiles = await getBlogPosts();

    return (
      <ErrorBoundary fallback={<div className="text-center py-10">An error occurred while loading the main page. Please try again later.</div>}>
        <ConfigProvider
          theme={{
            token: {
              colorPrimary: '#FF9900',
              borderRadius: 2
            },
          }}
        > <MdList mdFiles={mdFiles} /></ConfigProvider>
      </ErrorBoundary>
    );
  } catch (error) {
    console.error('Error in main page:', error);
    return <div className="text-center py-10">An error occurred while loading the main page. Please try again later.</div>;
  }
}